import { Button, Space } from 'antd';
import { useState } from 'react';
import type { YmDrawerProps } from 'ym-design';
import { YmDrawer } from 'ym-design';

function YmDrawerPage() {
  const [open1, setOpen1] = useState(false);
  const [open2, setOpen2] = useState(false);

  const handleDrawerClose = () => {
    console.log('--父级drawer关闭--');
    setOpen1(false);
  };

  const handleDrawerClose2 = () => {
    console.log('--子级drawer关闭--');
    setOpen2(false);
  };

  const YmDrawerProps: YmDrawerProps = {
    open: open1,
    title: 'drawer调试',
    onClose: handleDrawerClose,
    destroyOnClose: false,
    // children: (<div>drawer内容</div>),
    extra: (
      <Space size="small">
        {' '}
        <Button type="text" size="small">
          新增
        </Button>
        <Button type="text" size="small">
          删除
        </Button>
        <Button type="text" size="small">
          详情
        </Button>
      </Space>
    ),
    // footer: (<div style={{ display: 'flex', flexFlow: "row nowrap", alignItems: 'center', justifyContent: 'flex-end' }}>
    //   <Space size="small">
    //     <Button size='middle'>取消</Button> <Button type='primary' size="middle">确认</Button>
    //   </Space>
    // </div>)
    footer: true,
    push: { distance: '50px' },
    onCancel: handleDrawerClose,
    onOk: handleDrawerClose,
  };

  const YmDrawerChildProps: YmDrawerProps = {
    open: open2,
    title: 'drawerchild',
    onClose: handleDrawerClose2,
    destroyOnClose: false,
    onCancel: handleDrawerClose2,
    onOk: handleDrawerClose2,
    children: <div>drawerchild</div>,
  };

  return (
    <div>
      <Button
        onClick={() => {
          setOpen1(true);
        }}
      >
        打开drawer
      </Button>
      <YmDrawer {...YmDrawerProps}>
        <div style={{ border: 'red solid 1px' }}>
          <Button
            onClick={() => {
              setOpen2(true);
            }}
          >
            点击打开子级drawer
          </Button>
          <p style={{ width: '100%', height: '500px' }}>1</p>
          <p style={{ width: '100%', height: '500px' }}>2</p>
          <p style={{ width: '100%', height: '500px' }}>3</p>
          <YmDrawer {...YmDrawerChildProps} />
        </div>
      </YmDrawer>
    </div>
  );
}

export default YmDrawerPage;
